<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>KUI - List</title>
<link rel="stylesheet/less" type="text/css" href="../src/less/index.less" />
<script src="js/less.min.js" type="text/javascript"></script>
</head>

<body ontouchstart>
<div class="kui-page">
	<div class="kui-header">
		<div class="pull-left icon-left app-back" onClick="history.back()">返回</div>
		<h1 class="kui-title">List</h1>
	</div>
	<div class="kui-content">
		<div class="kui-block-title">带箭头+点击效果</div>
		<ul class="kui-list kui-list-link kui-list-active kui-1px-tb">
			<li class="kui-list-item"><div class="kui-list-info">带箭头列表</div></li>
			<li class="kui-list-item active">
				<div class="kui-list-info">带箭头列表.active</div>
				<div class="kui-list-cell"><span class="kui-badge kui-badge-border">321</span></div>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">带箭头列表</div>
				<div class="kui-list-cell"><span class="kui-badge kui-badge-border">321</span></div>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-media"><img src="img/f1.jpg" width="80" /><span class="kui-badge kui-badge-border">8</span></div>
				<div class="kui-list-info">
					<div class="kui-info-tit"><div class="kui-info-tit-txt">这里是标题</div><p>01-23</p></div>
					<p class="kui-info-doc">塞下秋来风景异。衡阳雁去无留意。四面边声连角起。千嶂里。长烟落日孤城闭。</p>
				</div>
			</li>
		</ul>
		<div class="kui-block-title">混合列表</div>
		<ul class="kui-list">
			<li class="kui-list-item">
				最简单的列表
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					带后缀的列表
				</div>
				<p>2016</p>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					带徽标的行
				</div>
				<div class="kui-list-cell"><span class="kui-badge">321</span></div>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					带红点的行
				</div>
				<div class="kui-list-cell kui-reddot"></div>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					带红点的行
				</div>
				<div class="kui-list-cell"><span class="kui-btn-default kui-btn-tiny">按扭</span></div>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					带箭头的行
				</div>
				<p class="kui-list-cell icon-angle-right"></p>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					<div class="kui-info-tit"><div class="kui-info-tit-txt">这里是标题</div><p>01-23</p></div>
					<p class="kui-info-doc">塞下秋来风景异。衡阳雁去无留意。四面边声连角起。千嶂里。长烟落日孤城闭。</p>
				</div>
				<p class="kui-list-cell icon-angle-right"></p>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-media"><img src="img/f1.jpg" width="80" /></div>
				<div class="kui-list-info">
					<div class="kui-info-tit"><div class="kui-info-tit-txt">这里是标题</div><p>01-23</p></div>
					<p class="kui-info-doc">塞下秋来风景异。衡阳雁去无留意。四面边声连角起。千嶂里。长烟落日孤城闭。</p>
				</div>
			</li>
			<li class="kui-list-item">
				<div class="kui-list-info">
					<div class="kui-info-tit"><div class="kui-info-tit-txt">这里是标题</div><p>01-23</p></div>
					<p class="kui-info-doc">塞下秋来风景异。衡阳雁去无留意。四面边声连角起。千嶂里。长烟落日孤城闭。</p>
					<small>作者：范仲淹</small>
				</div>
				<div class="kui-list-media"><img src="img/f1.jpg" width="80" /></div>
			</li>
		</ul>
	</div>
</div>
</body>
</html>